<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
	<%@include file="/WEB-INF/views/common/header.jsp" %>
	<title>新建兼职人员</title>
</head>
<body>
<%@include file="/WEB-INF/views/common/top.jsp" %>
<%@include file="/WEB-INF/views/common/nav.jsp" %>

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
	<div class="show-top-grids">
		<div class="main-grids about-main-grids">
			<h4>新建兼职人员</h4>
			<div class="recommended-info" pane="">

				<hr class="layui-bg-green">
				<form id="createUserForm" class="layui-form layui-form-pane" style="margin-top: 1em;" method="post"
				      action='<c:url value="/user/create"/>'>

					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">姓名</label>
							<div class="layui-input-inline">
								<input type="text" name="userName" id="userName" placeholder="姓名" autocomplete="off"
								       value="" class="layui-input"/>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">电话</label>
							<div class="layui-input-inline">
								<input type="text" name="phone" id="phone"
								       placeholder="电话" autocomplete="off"
								       value="" class="layui-input"/>
							</div>
						</div>

						<div class="layui-inline">
							<label class="layui-form-label">QQ</label>
							<div class="layui-input-inline">
								<input type="text" name="qq" id="qq"
								       placeholder="QQ" autocomplete="off"
								       value="" class="layui-input"/>
							</div>
						</div>


						<div class="layui-inline">
							<label class="layui-form-label">身份证</label>
							<div class="layui-input-inline">
								<input type="text" name="identity" id="identity"
								       placeholder="身份证" autocomplete="off"
								       value="" class="layui-input"/>
							</div>
						</div>

					</div>


					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">邮箱</label>
							<div class="layui-input-inline">
								<input type="text" name="email" id="email" placeholder="邮箱" autocomplete="off" value=""
								       class="layui-input"/>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">性别</label>
							<div class="layui-input-inline">
								<select id="gender" name="gender" style="display: inline-block;" class="layui-input">
									<option value="">请选择</option>
									<option value="true">男</option>
									<option value="false">女</option>
								</select>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">出生日期</label>
							<div class="layui-input-inline">
								<input type="text" readonly="readonly" name="birthday" id="birthday" lay-verify="date"   placeholder="出生日期" autocomplete="off"
								       value=""
								       class="layui-input"/>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">身高</label>
							<div class="layui-input-inline">
								<input type="number" name="stature" id="stature"
								       placeholder="身高" autocomplete="off"
								       value="" class="layui-input"/>
							</div>
						</div>

					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">兼职类型</label>
							<div class="layui-input-inline">
								<select id="postType" name="postType"  style="display: inline-block;"
								        class="layui-input">
									<option value="">请选择</option>
									<option value="1">兼职</option>
									<option value="2">全职</option>
								</select>
							</div>
						</div>

						<div class="layui-inline">
							<label class="layui-form-label">学校名称</label>
							<div class="layui-input-inline">
								<input type="text" name="schoolName" id="schoolName"
									   placeholder="学校名称" autocomplete="off"
									   value="" class="layui-input"/>
							</div>
						</div>

						<div class="layui-inline">
							<label class="layui-form-label">当前学历</label>
							<div class="layui-input-inline">
								<select id="educationalBackground" name="educationalBackground"  style="display: inline-block;"
								        class="layui-input">
									<option value="">请选择</option>
									<option value="1">高中</option>
									<option value="2">大专</option>
									<option value="3">本科</option>
									<option value="4">硕士</option>
									<option value="5">博士</option>
									<option value="6">其他</option>
								</select>
							</div>
						</div>

						<div class="layui-inline">
							<label class="layui-form-label">当前年级</label>
							<div class="layui-input-inline">
								<input type="type" name="grade" id="grade"
								       placeholder="当前年级" autocomplete="off"
								       value="" class="layui-input"/>
							</div>
						</div>

					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">工作经验</label>
							<div class="layui-input-inline">
								<select id="partExperience" name="partExperience"  style="display: inline-block;"
								        class="layui-input">
									<option value="">无</option>
									<option value="1">1年以下</option>
									<option value="2">1到3年</option>
									<option value="3">3到5年</option>
									<option value="4">5年以上</option>
								</select>
							</div>
						</div>
					</div>

					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">居住省</label>
							<div class="layui-input-inline">
								<select id="currentProvince" name="currentProvince" tag="province" style="display: inline-block;"
								        class="layui-input">
									<option value="">请选择</option>
								</select>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">居住市</label>
							<div class="layui-input-inline">
								<select id="currentCity" name="currentCity" tag="city" style="display: inline-block;"
								        class="layui-input">
									<option value="">请选择</option>
								</select>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">居住县</label>
							<div class="layui-input-inline">
								<select id="currentTown" name="currentTown" tag="town" style="display: inline-block;"
								        class="layui-input">
									<option value="">请选择</option>
								</select>

							</div>
						</div>

						<div class="layui-inline">
							<label class="layui-form-label">街道</label>
							<div class="layui-input-inline ">
								<select id="currentRoad" name="currentRoad" style="display: inline-block;"
								        class="layui-input">
									<option value="">请选择</option>
								</select>
							</div>
						</div>
					</div>

					<div class="layui-form-item">
						<label class="layui-form-label">居住地址</label>
						<div class="layui-input-block layui-col-sm6" style="margin-left:0;">
							<input type="text" name="currentAddress" id="currentAddress"
							       placeholder="居住地址" autocomplete="off"
							       value="" class="layui-input"/>
						</div>
					</div>


					<div class="layui-form-item">
						<label class="layui-form-label">兼职时间</label>
						<div class="layui-input-block layui-col-sm6" style="margin-left:0;height: 2em;"  id="divContainer">
							<input type="checkbox" title="星期一" value="1"  name="partTimes"/>
							<input type="checkbox" title="星期二" value="2" name="partTimes"/>
							<input type="checkbox" title="星期三" value="3" name="partTimes"/>
							<input type="checkbox" title="星期四" value="4" name="partTimes"/>
							<input type="checkbox" title="星期五" value="5" name="partTimes"/>
							<input type="checkbox" title="星期六" value="6" name="partTimes"/>
							<input type="checkbox" title="星期日" value="7" name="partTimes"/>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">备注</label>
						<div class="layui-input-block layui-col-sm6" style="margin-left:0;height: 2em;">
							<input type="text" name="remark" id="remark" placeholder="备注"
							       autocomplete="off"
							       value="" class="layui-input"/>
						</div>
					</div>


					<div class="layui-col-md4 layui-col-md-offset4">
						<div class="grid-demo">
							<button class="layui-btn" type="submit" id="btn_create_user">添加</button>
						</div>
					</div>

				</form>
			</div>
		</div>
	</div>

</div>
</body>

<script type="application/javascript">

	/*导航栏参数*/
    var $nav_a = $("#ul_nav a[href='/user/create']");
	$nav_a.parent().addClass("active");
	$nav_a.parent().parent().css("display", "block");


	layui.use(['layer','laydate'], function () {
		window.layer = layui.layer;
		var laydate = layui.laydate;
		laydate.render({
			elem: '#birthday'
		});
	});




	$(function () {
		/*绑定省*/
		initSelect("currentProvince");
		/*修改checkbox 样式*/
		$("#divContainer :checkbox").each(function () {
			var title = $(this).attr("title");
			var funcType = $(this).attr("tag-index");
			var div = $("<div class=\"layui-unselect layui-form-checkbox\" func-type=" + funcType + " lay-skin=\"primary\">"
				+ "<span>" + title + "</span><i class=\"layui-icon\"></i></div>");

			$(div).click(function () {
				var che = $(this).prev().prop("checked");
				$(this).prev().prop("checked", !che);
				if (!che) {
					$(this).addClass("layui-form-checked");
				} else {
					$(this).removeClass("layui-form-checked");
				}
			});
			$(this).after(div);
		});

		$("#currentProvince").change(function(){
			initSelect("currentCity",$(this).val());
		});
		$("#currentCity").change(function(){
			initSelect("currentTown",$(this).val());
		});
		$("#currentTown").change(function(){
			initArea("currentRoad",$(this).val());
		});


		window.fault = false;
		$("#createUserForm").validate({
			onfocusout: false,
			onkeyup: false,
			onclick: false,
			submitHandler: function () {
				var formData = $('#createUserForm').serializeObject();
				formData = JSON.stringify(formData);
				$.ajax({
					url: '<c:url value="/user/create"/>',
					dataType: 'json',
					type: 'post',
					data: formData,
					contentType: "application/json",
					error: function () {
					},
					success: function (data) {
						if (data.code !== "200") {
							window.layer.msg(data.message, {icon: 5, anim: 6});
						} else {
                            window.layer.msg("创建成功！", {icon: 6, anim: 6});
                            window.location.href = '<c:url value="/user/list"/>'
						}
					}
				});
			},
			rules: {
				userName: {
					required: true
				},
				phone:{
					required:true,
					validPhone:true
				},
				identity:{
					required:true
				},
				birthday:{
					required:true
				}
				,schoolName: {
					required: true
				}
				, currentProvince: {
					required: true
				}
				, currentCity: {
					required: true
				}
				, currentArea: {
					required: true
				}
			},
			messages: {

				userName: {
					required: "名称不能为空"
				},
				phone:{
					required:"手机号不能为空",
					validPhone:"手机号格式不正确"
				},
				identity:{
					required:"身份证不能为空"
				},
				birthday:{
					required:"出生日期"
				}
				,schoolName: {
					required: "请填写学校名称"
				}
				, currentProvince: {
					required: "选择现居住省"
				}
				, currentCity: {
					required: "选择现居住市"
				}
				, currentArea: {
					required: "选择现居住县"
				}
			},
			showErrors: function (errorMap, errorList) {
				window.fault = this.numberOfInvalids() > 0;
				this.defaultShowErrors();
			},
			errorPlacement: function (error, element) {
				if (window.fault) {
					window.fault = false;
					$(element).addClass("layui-form-danger").focus();
					window.layer.msg($(error).text(), {icon: 5, anim: 6});
				}
			}
		});
	});




	function initSelect(name,parentCode){
		var container = $("#"+name);
		$(container).empty();
		var tag = $(container).attr("tag");
		$(container).append("<option value=''>请选择</option>");
		$.ajax({
			url:'/static/json/list.json'
			,type:'GET'
			,dataType:"json"
			,success:function(data){
				for(var code in data){
					if(tag =="province" && code % 1e4 == 0){
						$(container).append("<option value='"+code+"'>"+data[code]+"</option>");
					}else if(tag == "city" && code % 1e2 == 0){
						var preCode =parseInt(code / 1e4);
						var preParentCode =parseInt(parentCode / 1e4);


						if(preCode == preParentCode) {
							if(code != parentCode || ["50","31","11","12"].indexOf(preCode + "") > -1) {
								$(container).append("<option value='" + code + "'>" + data[code] + "</option>");
							}
						}
					}else if(tag =="town"){
						 if(code % 1e2 != 0){
							 var preCode =parseInt(code / 1e2);
							 var preParentCode =parseInt(parentCode / 1e2);
							 if(preCode == preParentCode) {
									 $(container).append("<option value='" + code + "'>" + data[code] + "</option>");
							 }else{
								 if(parseInt(preCode / 10) ==parseInt(preParentCode / 10)){
									 $(container).append("<option value='" + code + "'>" + data[code] + "</option>");
								 }
							 }
						}
					}

				}
			}
		});
	}

	function initArea(name,code){
		var container = $("#"+name);
		$(container).empty();
		$(container).append("<option value=''>请选择</option>");
		if(code == ""){
			return true;
		}
		var url ="/static/json/town/"+code+".json";
		$.ajax({
			url:url
			,type:'GET'
			,dataType:"json"
			,success:function(data){
				for(var code in data){
					$(container).append("<option value='" + code + "'>" + data[code] + "</option>");
				}
				$(container).append("<option value='999999'>其他</option>");
			}
		});
	}

</script>


</html>
